<template>
    <div class="wrapper">
        <Header :title="title" :back="back"></Header>
        <div class="wordsErapper">
            <p class="words">{{wordObj.words}}</p>
            <p class="sp">[{{wordObj.pronounce}}]</p>
            <p class="chinese">{{wordObj.description}}</p>
        </div>
        <div class="setion">
            <ul>
                <li>
                    <span>单词</span>
                    <input type="text" v-model="newWord.word"
                    placeholder="请输入改正后的单词（可选）"
                    class="text1"/>
                </li>
                <li>
                    <span>发音</span><input type="text"
                    v-model="newWord.pronounce" placeholder="请输入修改后的发音（可选）"
                    class="text1"/>
                </li>
                <li>
                    <span>中文</span><input type="text"
                    v-model="newWord.description" placeholder="请输入修改的汉语意思（可选）"
                    class="text1"/>
                </li>
            </ul>
        </div>
        <button v-on:click="updata()" class="button1">确认修改</button>
    </div>
</template>

js

<script>
import Header from "../header/header"
export default {
    name:'UpdWord',
    components:{
        Header
    },
    data(){
        return{
            newWord:{
                word:'',
                pronounce:'',
                description:''
            },
            title:"修改单词",
            back:"/word",
            wordObj:{
                words:this.$route.params.word.word,
                pronounce:this.$route.params.word.pronounce,
                description:this.$route.params.word.
                description,
            }
        }
    },
    methods:{
        fun(){
            if (this.newWord.word == ''){
                this.newWord.word  =
                this.$route.params.word.word;
            }

            if (this.newWord.pronounce == ''){

                this.newWord.description =
                this.$route.params.word.description;
            }
        },

        updata(){
            this.fun();
            let id = this.$route.params.word.id;

            let word = this.newWord.word;

            let  pronounce = this.newWord.pronounce;

            let description = this.newWord.description;

            this.$http.jsonp("http://app.sencha.com.cn/soya/apps/testdb/server/?action=wordList.updata",
            { //请求参数
               params:{
                   id:id,
                   word:word,
                   pronounce:pronounce,
                   description:description
               }
            }).then(function(res){
                console.log(res.data);
                if (res.data.ret == 0){
                    alert("修改成功！");
                }else{
                    alert("修改失败！");
                }
            },function(error){
                console.log(error);
            
            });
        }
    }
}
</script>

css

<style scoped>
   .wrapper{
       margin-top: 55px; 
   }
   .wordsWrapper{
       background: #ffffff;
       margin-bottom: 12px;
       padding: 20px 0;
       color:#666;
      
   }
   .wordsWrapper .words{
       font-size: 25px;
       color: #44c293;
       font-weight:bold;
       padding: 10px 0; 
   }
   .sp{
       font-size: 12px;
       margin-bottom: 5px;

   }
   .chinese{
       font-size: 12px;
   }
   .text{
       padding-left: 80px;
       text-align: left 
   }
   .section{
       background: #ffffff;
       padding: 0 23px;
       text-align: left;
   }
   .section li{
       height: 55px;
       line-height: 55px;
       border-bottom:1px #eee solid;
       font-size: 16px;
   }
   .section input{
       border:none;
       margin-left: 16px;
       font-size: 14px;
       width: 80%;
   }
   .button1{
       border:0;
       background: #41b883;
       border-radius: 3px;
       height: 42px;
       width:calc(100% - 66px);
       margin: 50% 33px 10% 33px;
       font-size: 16px;
       font-weight:bold;
       color: #ffffff; 
   }
   
</style>